<template>
    <span class="sppp">最近一期测评参与人数
    </span>
    <div id="count"></div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue';
import * as echarts from 'echarts';
import { dataindex } from '@/api/team'
import { defineProps } from 'vue';

const props = defineProps({
    datadeep: Array,
    // required: true
});
const chartsY: any = ref();
const aa: any = ref();

const zhutuss = () => {
    const chartDom = document.getElementById('count');
    const myChart = echarts.init(chartDom);
    window.addEventListener('resize', () => {
        myChart.resize()

        setTimeout(() => {
            myChart.resize()

        }, 500);
    })
    const option = {
        // backgroundColor: '#031a40',
        grid: {
            left: "1%",
            right: "12%",
            bottom: "10%",
            top: "5%",
            containLabel: true,
        },
        tooltip: {
            show: true,
            formatter: "{b}<br/>{c}",
            textStyle: {
                fontWeight: "bold",
                fontSize: 12,
            },
        },
        yAxis: [{
            // name: "党支部",
            // nameTextStyle: {
            //     color: '#fff',
            //     fontSize: 8
            // },
            type: "category",
            inverse: true,
            axisLabel: {
                show: true,
                color: "#FFFFFF",
                fontSize: 10,
            },
            splitLine: {
                show: false,
                lineStyle: {
                    color: "#707070",
                },
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: "#707070",
                    width: 1,
                },
            },
            axisTick: {
                show: false,
            },
            data: chartsY.value
        },],
        xAxis: [{
            type: "value",
            axisTick: {
                show: false,
            },
            // max: 1000,

            axisLine: {
                show: true,
                lineStyle: {
                    color: "#707070",
                    width: 1,
                },
            },
            splitLine: {
                show: false,
            },
            name: "党支部",
            nameTextStyle: {
                color: '#fff',
                fontSize: 8
            },
            axisLabel: {
                inside: false,
                textStyle: {
                    color: "#fff",
                    fontSize: 10,
                },
                interval: 0,
                // rotate: 25,
                formatter: '{value}'
            },
        },],
        series: [{
            name: "assist",
            type: "bar",
            stack: "1",
            itemStyle: {
                normal: {
                    barBorderColor: "rgba(0,0,0,0)",
                    color: "rgba(0,0,0,0)",
                },
                emphasis: {
                    barBorderColor: "rgba(0,0,0,0)",
                    color: "rgba(0,0,0,0)",
                },
            },
            tooltip: {
                trigger: "none",
            },
            data: [],
        }, //设置两个柱状图进行重叠，第一层柱子设置透明度,由此来实现柱子与坐标轴之间的距离  stack:''设置重叠效果
        {
            type: "bar",
            stack: "1",
            barWidth: 7,
            barBorderRadius: 30,
            itemStyle: {
                normal: {
                    // barBorderRadius: 20,
                    color: function (params: any) {
                        // console.log('测试',_that.checkName)
                        // if (_that.platName == params.name) {
                        //    return 'yellow';
                        // } else {
                        return {
                            type: "linear",
                            x: 1,
                            y: 0,
                            x2: 0,
                            y2: 0,
                            colorStops: [{
                                offset: 0,
                                color: "#FFA4E1", // 100% 处的颜色
                            },
                            {
                                offset: 0.9,
                                color: "#FF24B6", // 0% 处的颜色
                            },
                            ],

                            // }
                        }
                    },
                },
            },
            // zlevel: 2,
            data: aa.value
        },
        ],
    }
    option && myChart.setOption(option);
}

const debouncedResize = debounce(zhutuss, 1000);
function debounce(func: { (): void; apply?: any; }, delay: number | undefined) {
    let timeoutId: number | undefined;

    return function () {
        const context = this;
        const args = arguments;

        clearTimeout(timeoutId);

        timeoutId = setTimeout(() => {
            func.apply(context, args);
        }, delay);
    };
}


watch(props, () => {
    console.log('count', props.datadeep)
    chartsY.value = props.datadeep && props.datadeep.map((item: any) => {
        return item.name
    })
    aa.value = props.datadeep && props.datadeep.map((item: any) => {
        return item.count
    })
    console.log('count', chartsY.value, aa.value)

    // zhutu()
    debouncedResize()
})
</script>

<style lang="scss" scoped>
@function torem($px) {
    //$px为需要转换的字号
    @return $px / 14px * 0.14rem; //100px为根字体大小
}

#count {
    width: 100%;
    height: torem(400px);
}

.sppp {
    margin: torem(10px);
    display: block;
}
</style>